import style from './index.less';
import { ClockCircleOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import { setCssVar } from '@/utils';
import { useState } from 'react';

const normal = {
  '--font-size-28PX': '2.8rem',
  '--font-size-32PX': '3.2rem',
  '--font-size-36PX': '3.6rem',
  '--font-size-40PX': '4.0rem',
  '--220PX': '22rem',
  '--514PX': '51.4rem',
};

const elder = {
  '--font-size-28PX': '4.0rem',
  '--font-size-32PX': '4.8rem',
  '--font-size-36PX': '5.0rem',
  '--font-size-40PX': '5.6rem',
  '--220PX': '30rem',
  '--514PX': '73.4rem',
};

export default function IndexPage() {
  const [toggle, setToggle] = useState<boolean>(true);
  // setCssVar
  const change = () => {
    toggle ? setCssVar(elder) : setCssVar(normal);
    setToggle(!toggle);
  };
  return (
    <div className={style.pageElder}>
      <Button size="small" onClick={change}>
        主题切换
      </Button>
      <div className={style.banner}></div>
      <section className={style.content}>
        <h1 className={style.title}>换新特惠</h1>
        <p className={style.desc}>
          新年焕新 新春特惠 全城狂欢 官网价4299 现活动立送1000元现金劵，
          可当场消费 全场手机可以分期付款0首付0利息 以旧换新，最高可低4000元
          联系电话 18103414888 专卖店喜迎新春 凭身份证进店领100元话费，
          回家过年。详情进店咨询。
        </p>
        <ul className={style.list}>
          <li className={style.item}>
            <ClockCircleOutlined style={{ fontSize: '38px' }} />
          </li>
          <li className={style.item}>
            <ClockCircleOutlined style={{ fontSize: '38px' }} />
          </li>
          <li className={style.item}>
            <ClockCircleOutlined style={{ fontSize: '38px' }} />
          </li>
          <li className={style.item}>
            <ClockCircleOutlined style={{ fontSize: '38px' }} />
          </li>
          <li className={style.item}>
            <ClockCircleOutlined style={{ fontSize: '38px' }} />
          </li>
          <li className={style.item}>
            <ClockCircleOutlined style={{ fontSize: '38px' }} />
          </li>
        </ul>
        <button className={style.button}>立即加入</button>
      </section>
    </div>
  );
}
